
<template>
  <div class="bg-white rounded-lg p-4">
    <div class="flex items-start">
      <img 
        :src="moment.user.avatar" 
        :alt="moment.user.nickname"
        class="w-10 h-10 rounded"
      >
      <div class="flex-1 ml-3">
        <h4 class="font-medium text-gray-900">{{ moment.user.nickname }}</h4>
        <p class="text-sm text-gray-600 mt-1">{{ moment.content }}</p>
        
        <!-- 图片网格 -->
        <div v-if="moment.images && moment.images.length" 
             class="grid grid-cols-3 gap-1 mt-2">
          <img 
            v-for="(image, index) in moment.images.slice(0, 9)" 
            :key="index"
            :src="image"
            class="w-full h-24 object-cover rounded"
            @click="previewImage(image)"
          >
        </div>
        
        <div class="flex items-center justify-between mt-3">
          <span class="text-xs text-gray-500">{{ formatTime(moment.timestamp) }}</span>
          <div class="flex items-center space-x-3">
            <button 
              @click="toggleLike"
              class="flex items-center space-x-1 text-gray-500"
              :class="{ 'text-red-500': moment.isLiked }"
            >
              <i :class="moment.isLiked ? 'fas fa-heart' : 'far fa-heart'"></i>
              <span v-if="moment.likes.length" class="text-xs">{{ moment.likes.length }}</span>
            </button>
            <button @click="showCommentInput = !showCommentInput" class="text-gray-500">
              <i class="far fa-comment"></i>
            </button>
          </div>
        </div>

        <!-- 点赞和评论 -->
        <div v-if="moment.likes.length || moment.comments.length" 
             class="bg-gray-50 rounded mt-2 p-2">
          <div v-if="moment.likes.length" class="flex items-center">
            <i class="fas fa-heart text-red-500 text-xs mr-1"></i>
            <span class="text-xs text-gray-600">
              {{ getLikeNames(moment.likes) }}
            </span>
          </div>
          
          <div v-if="moment.comments.length" class="mt-1 space-y-1">
            <div v-for="comment in moment.comments" :key="comment.id" 
                 class="text-xs">
              <span class="text-blue-600">{{ comment.user.nickname }}:</span>
              <span class="text-gray-700 ml-1">{{ comment.content }}</span>
            </div>
          </div>
        </div>

        <!-- 评论输入框 -->
        <div v-if="showCommentInput" class="mt-2">
          <input
            v-model="commentText"
            type="text"
            placeholder="评论..."
            class="w-full px-3 py-1 text-sm border border-gray-300 rounded focus:outline-none"
            @keyup.enter="addComment"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { Moment } from '@/types'
import dayjs from 'dayjs'

const props = defineProps<{
  moment: Moment
}>()

const emit = defineEmits<{
  like: [momentId: string]
  comment: [momentId: string, comment: any]
}>()

const showCommentInput = ref(false)
const commentText = ref('')

const toggleLike = () => {
  emit('like', props.moment.id)
}

const addComment = () => {
  if (!commentText.value.trim()) return
  
  const comment = {
    id: Date.now().toString(),
    userId: '100',
    user: {
      id: '100',
      username: 'me',
      nickname: '我',
      avatar: '/images/avatars/me.jpg'
    },
    content: commentText.value,
    timestamp: Date.now()
  }
  
  emit('comment', props.moment.id, comment)
  commentText.value = ''
  showCommentInput.value = false
}

const formatTime = (timestamp: number) => {
  return dayjs(timestamp).format('MM月DD日 HH:mm')
}

const getLikeNames = (likes: string[]) => {
  // 这里应该根据用户ID获取用户名，简化处理
  return likes.map(() => '朋友').join('、')
}

const previewImage = (image: string) => {
  // 实现图片预览
  console.log('Preview image:', image)
}
</script>
